<template>
  <section class="todoapp"> 
    
    <TodoHeader
    @hAdd ="hAdd"
    ></TodoHeader>
    <TodoMain :list="showList" 
    @delTask ="delTask"
    @select="select"
    @hChange="hChange"
    >
     
    </TodoMain>
    <TodoFooter
    :list ="showList"
    @cDone ="cDone"
    @check="check"
   
    ></TodoFooter>
  </section>
</template>

<script>
import TodoFooter from './components/TodoFooter.vue';
import TodoHeader from './components/TodoHeader.vue';
import TodoMain from './components/TodoMain.vue';
export default { 
  components: 
  { TodoFooter, TodoHeader, TodoMain } ,
  data () {
  return {
    // list: [
    //   { id: 1, name: '吃饭', isDone: true },
    //   { id: 2, name: '睡觉', isDone: false },
    //   { id: 3, name: '打豆豆', isDone: true }
    // ],
     
    list:  JSON.parse(localStorage.getItem('list')),
    type : 'all'
  }
},
methods : {
  delTask(id) {
    const index =this.list.findIndex(item => item.id === id)
    this.list.splice(index,1)
  },
  hChange(id) {
    const obj =this.list.find(item => item.id === id)
    obj.isDone = !obj.isDone
  },
  hAdd(taskName) {
    this.list.push({
      id : Date.now(),
      name: taskName,
      isDone : false

    })
    
  },
  cDone() {
    this.list =this.list.filter(item => !item.isDone)
  },
  check(type) {
    this.type = type
  },
  select(val) {
    this.list.forEach(item => item.isDone =val);
  }
},
computed: {
  showList() {
    if(this.type === 'all') {
      return this.list
    }else if(this.type === 'active') {
      return this.list.filter(item => !item.isDone)
    }else {
      return this.list.filter(item => item.isDone)

    }
  }
},
watch: {
  list : {
    deep: true,
    handler() {
      localStorage.setItem('list',JSON.stringify(this.list))
    }
  }
}
  
  }
</script>

<style></style>
